{extend name='comm/base' /}
{block name='header'}
{include file='comm/header'}
{/block}
{block name='slider'}
{include file='comm/slider'}
{/block}
{block name='main'}

<div class="main-content">
    <div class="main-content-inner">
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="{:url('admin.index')}">首页</a>
                </li>

                <li>
                    <a href="#">个人资料</a>
                </li>

            </ul><!-- /.breadcrumb -->

        </div>

        <div class="page-content">

            <div class="row">
                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-1 control-label no-padding-right">用户名</label>
                            <div class="col-sm-9">
                                <input type="text" disabled="disabled" class="rcol-xs-10 col-sm-5"
                                       value="{$profile_data.username}（用户名无法修改）">
                            </div>
                        </div>

                        <div class="space-4"></div>

                        <div class="form-group">
                            <label class="col-sm-1 control-label no-padding-right">密码</label>
                            <div class="col-sm-9">
                                <input type="password"  id="password" placeholder="密码留空不修改"
                                       class="col-xs-10 col-sm-5" value="">
                                <input type="hidden" id="uid" value="{$profile_data.id}"/>

                            </div>
                        </div>

                        <div class="space-4"></div>
                        <div class="form-group">
                            <label class="col-sm-1 control-label no-padding-right"> 头像 </label>

                            <div class="col-xs-12 col-sm-3 center">
                                <div style="width:120px; height:120px;border-radius: 60px;overflow:hidden;border: 2px solid #FFF;" >
                                    <span class="profile-picture">
                                    <img  id="avatar" class="editable img-responsive" style="width:120px;height:120px
                                   " alt="头像"  src="{$profile_data.avatar}"/>
                                    </span>
                                    <input type="file" id="picture" style="display: none;" class="picture_data"/> <br>
                                </div>
                            </div>
                        </div>
                        <div class="space-4"></div>

                        <div class="form-group">
                            <label class="col-sm-1 control-label no-padding-right">
                                E-mail </label>
                            <div class="col-sm-9">
                                <input type="email"  id="email" placeholder="E-mail"
                                       class="col-xs-10 col-sm-5" value="{$profile_data['email']}">
                                <span class="help-inline col-xs-12 col-sm-7">
												<span class="middle"></span>
											</span>
                            </div>
                        </div>

                        <div class="space-4"></div>

                        <div class="col-md-offset-2 col-md-9">
                            <button class="btn btn-info" type="button" id="save_btn">
                                <i class="icon-ok bigger-110"></i>
                                提交
                            </button>
                            <button class="btn" type="reset">
                                <i class="icon-undo bigger-110"></i>
                                重置
                            </button>
                        </div>
                    </form>
                    <!-- PAGE CONTENT ENDS -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div>
    </div><!-- /.main-content -->
</div>
{/block}
{block name='footer'}
{include file='comm/footer'}
{/block}
{block name='script'}

<!--[if !IE]> -->
<script src="__ace_js__/jquery-2.1.4.min.js"></script>


<!-- <![endif]-->

<!--[if IE]>
<script src="__ace_js__/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
    if ('ontouchstart' in document.documentElement) document.write("<script src='__ace_js__/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="__ace_js__/bootstrap.min.js"></script>

<!-- page specific plugin scripts -->

<!--[if lte IE 8]>
<script src="__ace_js__/excanvas.min.js"></script>
<![endif]-->
<script src="__ace_js__/jquery-ui.custom.min.js"></script>
<script src="__ace_js__/jquery.ui.touch-punch.min.js"></script>
<script src="__ace_js__/jquery.gritter.min.js"></script>
<script src="__ace_js__/bootbox.js"></script>
<script src="__ace_js__/jquery.easypiechart.min.js"></script>
<script src="__ace_js__/bootstrap-datepicker.min.js"></script>
<script src="__ace_js__/jquery.hotkeys.index.min.js"></script>
<script src="__ace_js__/bootstrap-wysiwyg.min.js"></script>
<script src="__ace_js__/select2.min.js"></script>
<script src="__ace_js__/spinbox.min.js"></script>
<script src="__ace_js__/bootstrap-editable.min.js"></script>
<script src="__ace_js__/ace-editable.min.js"></script>
<script src="__ace_js__/jquery.maskedinput.min.js"></script>
<script src="__ace_js__/chosen.jquery.min.js"></script>


<!-- ace scripts -->
<script src="__ace_js__/ace-elements.min.js"></script>
<script src="__ace_js__/ace.min.js"></script>
<script src="__ace_js__/bootstrap-datepicker.js"></script>
<script src="__ace_js__/autosize.min.js"></script>
<script src="__ace_js__/jquery.inputlimiter.min.js"></script>
<script src="__ace_js__/jquery.knob.min.js"></script>
<script src="__ace_js__/bootstrap-tag.min.js"></script>


<script>


    $('#avatar').click(function () {
        $('#picture').click();
    });

    $(document).ready(function () {
        function preview_picture(pic) {
            var r = new FileReader();
            r.readAsDataURL(pic);
            r.onload = function (e) {
                $("#avatar").attr("src", this.result).show();
            };
        }
        $("#picture").change(function () {
            var current_pic = this.files[0];
            preview_picture(current_pic);
        })
    });


    $('#save_btn').click(function () {
        var uid = $("#uid").val();
        var email = $("#email").val();
        var password = $('#password').val();
        var pattern = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        var flag = pattern.test(email);
        if (!flag){
            swal({
                type: 'warning', // 弹框类型
                title: 'Email地址不合法！', //标题
                confirmButtonColor: '#438EB9',// 确定按钮的 颜色
                confirmButtonText: '确定',// 确定按钮的 文字
            });
            return false;
        }
        var formData = new FormData();
        var com = $('.picture_data')[0].files[0];
        formData.append('image',com);
        formData.append('email',email);
        formData.append('password',password);
        $.ajax({
            url: "/admin/adminUser/profile_update/"+uid,
            type: 'POST',
            dataType: 'JSON',
            data: formData,
            processData: false,//不处理数据
            contentType: false,//不处理内容类型
            success: function (res) {
                if (res.code == 1) {
                    swal({
                        type: 'success', // 弹框类型
                        title: '更新成功！', //标题
                        confirmButtonColor: '#438EB9',// 确定按钮的 颜色
                        confirmButtonText: '确定',// 确定按钮的 文字
                    })
                } else {
                    swal({
                        type: 'warning', // 弹框类型
                        title: res.msg, //标题
                        confirmButtonColor: '#438EB9',// 确定按钮的 颜色
                        confirmButtonText: '确定',// 确定按钮的 文字
                    });
                }
                return false;
            }, error: function (e) {
                swal({
                    type: 'error', // 弹框类型
                    title: e.msg, //标题
                    confirmButtonColor: '#438EB9',// 确定按钮的 颜色
                    confirmButtonText: '确定',// 确定按钮的 文字
                });
            }
        })
    });
</script>
{/block}
